<template>
  <h1>隐藏显示指令</h1>
  <hr>
<!--  v-if="布尔值" true表示元素显示 false表示元素隐藏 -->
  <p v-if="isShow">月亮</p>
  <p v-if="isShow">星星</p>
  <p v-else>太阳</p>
  <hr>
<!--
    v-if的值交给isShow响应式变量来控制v-else 是 v-if取反
    v-show是修改元素的CSS属性display值为none,不会频繁删除创建匀速,开销较小
-->
  <p v-if="false">小红</p>
  <p v-show="false">小红</p>

</template>


<script setup>
 import {ref} from "vue";

 const isShow = ref(false);
</script>

<style scoped>

</style>